<template>
	<view class="bg">
		<view class="task_bg">
			<!-- <view v-for="(item, index) in taskArr" :key="index" class="task_one">
				<view class="task_left_top">
					<view class="task_round">
						<image src="../../../static/images/common/task.png" mode=""></image>
					</view>
					<view class="name">{{ item.name }}</view>
				</view>
				<view class="task_content">
					<view class="task_name">
						<view class="task_left">任务名称</view>
						<view class="task_right nameFont">{{ item.rwmc }}</view>
					</view>
				</view>
			</view> -->
			<view class="task_one">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item label-width="160" :label-position="labelPosition" label="办理情况" prop="blqk">
						<u-input :border="border" placeholder="请输入办理情况" v-model="model.blqk" type="textarea"></u-input>
					</u-form-item>
					<u-form-item label-width="160" :label-position="labelPosition" label="存在问题" prop="czwt">
						<u-input :border="border" placeholder="请输入存在问题" v-model="model.czwt" type="textarea"></u-input>
					</u-form-item>
					<u-form-item label-width="160" :label-position="labelPosition" label="下一步计划" prop="xybjh">
						<u-input :border="border" placeholder="请输入下一步计划" v-model="model.xybjh" type="textarea"></u-input>
					</u-form-item>
					<!-- <u-form-item :label-position="labelPosition" label="图片" prop="photo" label-width="120">
						<u-upload :action="baseUrl + '/filesUpload/appUploadFiles'" ref="uUpload" :auto-upload="false" width="160" height="160" max-count="6"></u-upload>
					</u-form-item>
					<u-form-item :label-position="labelPosition" label="反馈文件" prop="photo" label-width="160">
						<view class="files">
							<view v-for="(item, index) in filesArr" :key="index">{{
                item.name
              }}</view>
							<view class="files_btn" @tap="chooseFile()">选择文件 ></view>
						</view>
					</u-form-item> -->
				</u-form>
				<u-button @click="submit">提交</u-button>
			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
import { insideFeedback } from "../../../request/dcxt";
import { baseUrl1 } from "../../../request/baseUrl";
export default {
	data() {
		return {
			baseUrl: "",
			taskArr: [
				{
					name: "单位重大事项",
					rwmc: "2021重大项目测试任务清单",
					zsx:
						"推广生态调控、农艺改良、物理防控、生物防治等措施，2020年实现不用化学农药绿色生态茶园1.8万亩。",
					fknr: "测试内容，子任务测试反馈内容20200217，测试通过！",
					zt: "待签收",
					ztType: 1,
					qtdw: "农业局",
					xbdw: "住建局、商务局、统计局",
					rwlc: "第 3 轮",
					rwsx: "2021-01-18",
				},
			],
			model: {
				blqk: "",
				czwt: "",
				xybjh: "",
			},
			rules: {
				blqk: [
					{
						required: true,
						message: "请输入办理情况",
						trigger: ["change", "blur"],
					},
				],
				czwt: [
					{
						required: true,
						message: "请输入存在问题",
						trigger: ["change", "blur"],
					},
				],
				xybjh: [
					{
						required: true,
						message: "请输入下一步计划",
						trigger: ["change", "blur"],
					},
				],
			},
			border: false,
			labelPosition: "top",
			errorType: ["message"],
			recipientId: "",
			taskUnitId: "",
			filesArr: [],
		};
	},
	onLoad(option) {
		this.baseUrl = baseUrl1;
		this.recipientId = option.id;
	},
	computed: {
		borderCurrent() {
			return this.border ? 0 : 1;
		},
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		//   选择文件
		chooseFile() {
			var _this = this;
			uni.chooseFile({
				count: 6, //默认100
				extension: [".zip", ".doc"],
				success: function (res) {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						_this.filesArr.push({
							tempFilePaths: res.tempFilePaths[i],
							name: res.tempFiles[i].name,
						});
					}
				},
			});
		},
		submit() {
			this.$refs.uForm.validate((valid) => {
				if (valid) {
					var params = {
						userTaskId: this.recipientId,
						content: this.model.blqk,
						problem: this.model.czwt,
						plan: this.model.xybjh,
						loginerId: uni.getStorageSync("loginId"),
					};
					insideFeedback(params).then((res) => {
						if (res.data.code == 200) {
							this.$refs.uToast.show({
								title: "提交成功！",
								type: "success",
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								});
							}, 1000);
						} else {
							this.$refs.uToast.show({
								title: "提交失败！",
								type: "error",
							});
						}
					});
				} else {
					console.log("验证失败");
				}
			});
		},
		errorChange(index) {
			if (index == 0) this.errorType = ["message"];
			if (index == 1) this.errorType = ["toast"];
			if (index == 2) this.errorType = ["border-bottom"];
			if (index == 3) this.errorType = ["border"];
		},
	},
};
</script>

<style lang="scss" scoped>
.files {
	display: flex;
	flex-flow: row wrap;
	view {
		width: 300rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.files_btn {
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #19be6b;
		color: white;
		border-radius: 8rpx;
	}
}
.top_search {
	width: 100vw;
	height: 120rpx;
	background-color: #3988ff;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;

	.search_screening {
		margin-left: 2%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		.font {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.7);
		}
	}
}

.popupModel {
	position: relative;
	padding-top: 48rpx;

	.task_left_top {
		position: absolute;
		top: 0;
		left: 0;
		min-width: 150rpx;
		height: 48rpx;
		background: rgba(48, 116, 255, 0.2);
		border-radius: 24rpx;
		display: flex;
		align-items: center;

		.name {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3074ff;
			padding: 0 20rpx;
		}

		.task_round {
			width: 48rpx;
			height: 48rpx;
			background: #3074ff;
			z-index: 999;
			box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.popupContent {
		padding: 24rpx;

		.Content {
			width: 100%;
			display: flex;
			align-items: center;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
			}
		}
	}
}

.task_bg {
	// margin-top: 120rpx;

	.task_one {
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx;
		position: relative;
		margin-bottom: 40rpx;
		box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
		border-radius: 24rpx 8rpx 8rpx 8rpx;

		.line {
			width: 1rpx;
			height: calc(100% - 48rpx);
			// background-color: pink;
			position: absolute;
			left: 44rpx;
			top: 24rpx;
			border-left: 1rpx dashed rgba(48, 116, 255, 0.1);
			// z-index: 5;
		}
	}

	.record_flex {
		display: flex;
		align-items: flex-start;
		margin-bottom: 40rpx;

		.record_flex_1 {
			flex: 1;
			padding-left: 25rpx;

			.record_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.flex_1 {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 16rpx;
						height: 14rpx;
					}
				}

				.flex_2 {
					flex: 1.5;
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 16rpx;
						height: 14rpx;
					}
				}

				.flex_right {
					display: flex;
					justify-content: flex-end;
					flex: 1;
				}

				.center_font {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #3074ff;
				}

				.name_font {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #272b32;
				}
			}

			.time {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}
		}

		.record_flex_40 {
			width: 40rpx;

			.round {
				width: 40rpx;
				height: 40rpx;
				background: linear-gradient(-30deg, #3074ff 0%, #41baff 100%);
				box-shadow: 2rpx 3rpx 12rpx 0rpx rgba(48, 116, 255, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 999999;

				image {
					width: 16rpx;
					height: 16rpx;
				}
			}
		}
	}

	.task_left_top {
		position: absolute;
		top: 0;
		left: 0;
		min-width: 200rpx;
		height: 48rpx;
		background: rgba(48, 116, 255, 0.2);
		border-radius: 24rpx;
		display: flex;
		align-items: center;

		.name {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3074ff;
			padding: 0 20rpx;
		}

		.task_round {
			width: 48rpx;
			height: 48rpx;
			background: #3074ff;
			z-index: 5;
			box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.task_content {
		width: 100%;
		margin-top: 40rpx;

		.task_btnArr {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 40rpx;
		}

		.task_btn {
			background: #3074ff;
			border-radius: 4rpx;
			padding: 8rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			.more {
				width: 24rpx;
				height: 6rpx;
				margin-right: 10rpx;
			}

			.font {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
			}
		}

		.btn_color1 {
			background-color: rgba(231, 233, 240, 1);
		}

		.btn_color2 {
			background-color: rgba(248, 95, 120, 1);
		}

		.task_name {
			display: flex;
			padding-bottom: 40rpx;
		}

		.task_child {
			padding: 20rpx 0;
			border-top: 1rpx solid rgba(231, 233, 240, 1);
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);
		}

		.task_test {
			display: flex;
			margin: 20rpx 0;
		}

		.task_left {
			flex: 2;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}

		.nameFont {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #272b32;
		}

		.task_right {
			flex: 7;
			display: flex;
			align-items: center;

			.childFont {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
			}

			.zt_type1 {
				margin-left: 10rpx;
				background: #f85f78;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.zt_type2 {
				margin-left: 10rpx;
				background: rgba(250, 173, 51, 1);
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>
